
<template>
  <!-- 导航部分 -->
  <el-row>
    <el-col :span="24">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>来料检验</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <!-- 搜索栏 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-form :model="iqcQuery" inline>
        <el-form-item label="检验单编号">
          <el-input v-model="iqcQuery.iqcCode"/>
        </el-form-item>
        <el-form-item label="供应商编码">
          <el-input v-model="iqcQuery.vendorCode"/>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="iqcQuery.vendorName"/>
        </el-form-item>
        <el-form-item label="供应商批次号">
          <el-input v-model="iqcQuery.vendorBatch"/>
        </el-form-item>
        <el-form-item label="产品物料编码">
          <el-input v-model="iqcQuery.itemCode"/>
        </el-form-item>
        <el-form-item label="产品物料名称">
          <el-input v-model="iqcQuery.itemName"/>
        </el-form-item>

        <el-form-item label="检测结果">
          <el-select  style="width:100px" v-model="iqcQuery.checkResult">
            <el-option label="检验通过" :value="1"/>
            <el-option label="检验不通过" :value="2"/>
          </el-select>
        </el-form-item>

        <el-form-item label="来料日期">
          <el-date-picker
              v-model="iqcQuery.reciveDate"
              type="date"
              placeholder="Pick a date"
              clearable
          />
        </el-form-item>

        <el-form-item label="检测日期">
          <el-date-picker
              v-model="iqcQuery.inspectDate"
              type="date"
              placeholder="Pick a date"
              clearable
          />
        </el-form-item>

        <el-form-item label="检测人员">
          <el-input v-model="iqcQuery.inspector"/>
        </el-form-item>


        <el-form-item>
          <el-button @click="loadIqc">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetIqc">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>


  <!-- 工具栏 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-button type="primary" @click="toAdd">新增</el-button>
      <el-button type="primary" @click="toRelease">修改</el-button>
      <el-button type="primary" @click="toDeletes">删除</el-button>
    </el-col>
  </el-row>


  <!-- 数据表 -->
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-table
          :data="iqcs"
          border
          stripe ref="iqcTable"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="iqcCode" label="来料检验单编号"/>
        <el-table-column prop="iqcName" label="来料检验单名称"/>
        <el-table-column prop="vendorNick" label="供应商简称"/>
        <el-table-column prop="vendorBatch" label="供应商批次号"/>
        <el-table-column prop="vendorBatch" label="供应商批次号"/>
        <el-table-column prop="itemCode" label="产品物料编码"/>
        <el-table-column prop="itemName" label="产品物料名称"/>
        <el-table-column prop="itemName" label="产品物料名称"/>
        <el-table-column prop="quantityRecived" label="接收数量"/>
        <el-table-column prop="quantityCheck" label="检测数量"/>
        <el-table-column prop="quantityUnqualified" label="不合格数"/>
        <el-table-column prop="checkResult" label="检验结果">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.checkResult == 1">检验通过</el-tag>
            <el-tag type="success" v-else-if="scope.row.checkResult == 2">检验不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reciveDate" label="来料日期"/>
        <el-table-column prop="inspectDate" label="检测日期"/>
        <el-table-column prop="inspector" label="检测人员"/>
        <el-table-column prop="status" label="单据状态">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status == 1">草稿</el-tag>
            <el-tag type="success" v-else-if="scope.row.status == 2">已确认</el-tag>
          </template>
        </el-table-column>


        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-button-group>
              <template v-if="scope.row.status == 1">
                <el-button size="small" type="primary" @click="toRelease(scope.row.iqcId)">修改</el-button>
                <el-button size="small" type="primary" @click="toDelete(scope.row.defectId)">删除</el-button>
              </template>
              <el-button size="small" type="primary">查看报表</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>


  <!-- 新增的弹窗 -->
  <el-dialog v-model="iqcAddWinDialogVisible"
             title="新增来料检测"
             width="65%"
  >

    <el-form :model="newIqc" :inline="true">


      <el-form-item label="检验单编号" style="width: 400px">
        <el-input v-model="newIqc.iqcCode"/>
      </el-form-item>

      <el-form-item label="检验单名称">
        <el-input v-model="newIqc.iqcName" style="width: 400px"/>
      </el-form-item>

      <el-form-item label="产品物料编码">
        <el-input v-model="newIqc.itemCode"/>
      </el-form-item>

      <el-form-item label="产品物料名称">
        <el-input v-model="newIqc.itemName"/>
      </el-form-item>

      <el-form-item label="单位">
        <el-input v-model="newIqc.unitOfMeasure"/>
      </el-form-item>

      <el-form-item label="供应商编码">
        <el-input v-model="newIqc.vendorCode"/>
      </el-form-item>

      <el-form-item label="供应商简称">
        <el-input v-model="newIqc.vendorName"/>
      </el-form-item>

      <el-form-item label="供应商批次号">
        <el-input v-model="newIqc.vendorBatch"/>
      </el-form-item>

      <el-form-item label="本次接收数量">
        <el-input-number v-model="newIqc.quantityRecived" min="1"/>
      </el-form-item>

      <el-form-item label="本次检测数量">
        <el-input v-model="newIqc.quantityCheck"/>
      </el-form-item>

      <el-form-item label="不合格数量">
        <el-input-number v-model="newIqc.quantityUnqualified" min="0"/>
      </el-form-item>

      <el-form-item label="来料日期">
        <el-date-picker
            v-model="newIqc.reciveDate"
            type="date"
            placeholder="Pick a date"
            clearable
        />
      </el-form-item>

      <el-form-item label="检测日期">
        <el-date-picker
            v-model="newIqc.inspectDate"
            type="date"
            placeholder="Pick a date"
            clearable
        />
      </el-form-item>


      <el-form-item label="检测项类型">
        <el-select  style="width:100px" v-model="newIqc.checkResult">
          <el-option label="检测通过" :value="1"/>
          <el-option label="检测不通过" :value="2"/>
        </el-select>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="newIqc.remark" style="width: 700px"/>
      </el-form-item>


    </el-form>

    <el-button @click="dialogVisible">取消</el-button>
    <el-button type="primary" @click="addIqcSubmit">
      提交
    </el-button>


  </el-dialog>




  <!-- 编辑的弹窗 -->
  <el-dialog v-model="iqcUpdateWinDialogVisible"
             title="编辑来料检测"
             width="65%"
  >

    <el-form :model="updateIqc" :inline="true">


      <el-form-item label="检验单编号" style="width: 400px">
        <el-input v-model="updateIqc.iqcCode"/>
      </el-form-item>

      <el-form-item label="检验单名称">
        <el-input v-model="updateIqc.iqcName" style="width: 400px"/>
      </el-form-item>

      <el-form-item label="产品物料编码">
        <el-input v-model="updateIqc.itemCode"/>
      </el-form-item>

      <el-form-item label="产品物料名称">
        <el-input v-model="updateIqc.itemName"/>
      </el-form-item>

      <el-form-item label="单位">
        <el-input v-model="updateIqc.unitOfMeasure"/>
      </el-form-item>

      <el-form-item label="供应商编码">
        <el-input v-model="updateIqc.vendorCode"/>
      </el-form-item>

      <el-form-item label="供应商简称">
        <el-input v-model="updateIqc.vendorName"/>
      </el-form-item>

      <el-form-item label="供应商批次号">
        <el-input v-model="updateIqc.vendorBatch"/>
      </el-form-item>

      <el-form-item label="本次接收数量">
        <el-input-number v-model="updateIqc.quantityRecived" min="1"/>
      </el-form-item>

      <el-form-item label="本次检测数量">
        <el-input v-model="updateIqc.quantityCheck"/>
      </el-form-item>

      <el-form-item label="不合格数量">
        <el-input-number v-model="updateIqc.quantityUnqualified" min="0"/>
      </el-form-item>

      <el-form-item label="来料日期">
        <el-date-picker
            v-model="updateIqc.reciveDate"
            type="date"
            placeholder="Pick a date"
            clearable
        />
      </el-form-item>

      <el-form-item label="检测日期">
        <el-date-picker
            v-model="updateIqc.inspectDate"
            type="date"
            placeholder="Pick a date"
            clearable
        />
      </el-form-item>


      <el-form-item label="检测项类型">
        <el-select  style="width:100px" v-model="updateIqc.checkResult">
          <el-option label="检测通过" :value="1"/>
          <el-option label="检测不通过" :value="2"/>
        </el-select>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="updateIqc.remark" style="width: 700px"/>
      </el-form-item>


    </el-form>

    <el-button @click="updateDialogVisible">取消</el-button>
    <el-button type="primary" @click="updateIqcSubmit">
      保存
    </el-button>
    <el-button type="primary" @click="confirmIqcSubmit">
      完成
    </el-button>


  </el-dialog>





  <!-- 分页栏 -->
  <el-row style="margin-top: 10px">
    <!-- 监听页码的变化事件 -->
    <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
  </el-row>
</template>

<script setup>
import {onBeforeUnmount, onMounted, ref, shallowRef} from "vue";
import iqcRequest from "@/api/iqc.js";
import {ElMessageBox} from "element-plus";
import {ElMessage} from "element-plus";
// 封装查询条件
let iqcQuery = ref({});
// 封装查询的结果集合
let iqcs = ref([])
//保存前端多选的数据
let iqcTable = ref(null);
// 封装当前的页面
let curPage = ref(1);
// 封装查询的数据总条数
let total = ref(0);


function loadIqc(){
  iqcRequest.loadIqcs(iqcQuery.value,curPage.value,10,res =>{
    total.value = res.data.total;
    iqcs.value = res.data.list;
  })
}

//重置按钮
function resetIqc(){
  iqcQuery.value = null;
  loadIqc();
}

function changePage(value){
  curPage.value = value;
  loadIqc();
}



//新增弹窗标记
let iqcAddWinDialogVisible = ref(false);
//保存新增数据
let newIqc = ref({status:1});

//新增
function toAdd(){
  iqcAddWinDialogVisible.value = true;
}

//取消
function dialogVisible(){
  iqcAddWinDialogVisible.value = false;
}

//提交
function addIqcSubmit(){
  console.log(newIqc.value.status);
  iqcRequest.addIqc(newIqc.value,res => {

    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "新增成功"
      });
      newIqc.value = {};
      // 关闭窗体
      dialogVisible();
      // 刷新表格
      loadIqc();
    } else {
      ElMessage({
        type: "error",
        message: "新增失败"
      });
    }
  });
}


//行编辑弹窗标记
let iqcUpdateWinDialogVisible = ref(false);
//保存编辑内容
let updateIqc = ref({status:1});

//点击编辑按钮回显数据
function toRelease(iqcId){
  iqcRequest.selectIqcById(iqcId, res=>{
    updateIqc.value = res.data;
  })
  iqcUpdateWinDialogVisible.value = true;
}
//行编辑取消按钮
function updateDialogVisible(){
  iqcUpdateWinDialogVisible.value = false;
}

// 行编辑提交按钮
function updateIqcSubmit(){
  iqcRequest.updateIqc(updateIqc.value, res=>{
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "编辑成功"
      });
      // 关闭窗体
      updateDialogVisible();
      // 刷新表格
      loadIqc();
    } else {
      ElMessage({
        type: "error",
        message: "编辑失败"
      });
    }
  })
}
function confirmIqcSubmit(){
  updateIqc.value.status = 2;
  updateIqcSubmit();
}




// 在声明周期的onmounted函数中调用loadUsers函数
onMounted(()=>{

  loadIqc();
})
</script>

<style scoped>

</style>